@import "../common.scss";

body {
	background-color: #fff;
}



.content {
	padding: 0 ws(20);
	padding-bottom: ws(20);
	.header-btn{
		margin-top: ws(10);
		display: flex;
		font-size: ws(15);
		align-items: center;
		justify-content:center;
		> span {
			margin: 0 ws(15);
		}
		.vehicle {
			padding: ws(4) ws(25);
			border-radius: ws(40);
			background-color: $main-color;
			color: #fff;
			box-shadow: 0 ws(3) ws(10) rgba($main-color,.3);
		};
		.person{
			padding: ws(4) ws(25);
			border-radius: ws(40);
			color: $main-color;
			box-shadow: 0 0 0 ws(1) $main-color;
		}
	}
	.name,
	.photo {
		display: flex;
		flex-direction: column;
		font-size: ws(15);
	}
	.name{
		margin-bottom: ws(56/2);
	}
	.title {
		font-size: ws(15);
		font-weight: bold;
		color: $main-color;
	}
	.input {
		display: flex;
		align-items: center;
		@include border-line(#e4e1e1, bottom);
		>input {
			font-size: ws(15);
			flex: 1;
			border: unset;
			padding: 0;
			height: unset;
			margin: 0;
			border-radius: unset;
		}
	}
	.img-wapper {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: ws(30);
		@include border-line(#e4e1e1, bottom);
		.preview {
			margin-right: ws(10);
			margin-bottom: ws(10);
			height: ws(170/2);
			position: relative;
			img {
				width: ws(170/2);
				height: ws(170/2);
				object-fit: cover;
				border-radius: ws(8/2);
			}
		}
		.delete {
			position: absolute;
			top: ws(-4);
			height: ws(15);
			width: ws(15);
			right: ws(-4);
			border-radius: 50%;
			background-color: #000;
			transform: rotate(45deg);
			&::after,
			&::before {
				margin: auto;
				content: '';
				position: absolute;
				background-color: #fff;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
			}
			&::after {
				height: ws(1);
				width: 70%;
			}
			&::before {
				width: ws(1);
				height: 70%;
			}
		}
		.button {
			width: ws(170/2);
			height: ws(170/2);
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #F3F3F3;
			border-radius: ws(8/2);
			margin-right: 10px;
			>img {
				width: ws(40);
			}
		}
	}
	.list{
		margin-bottom: ws(30);
		.nape{
			display: flex;
			align-items: flex-start;
			> div {
				flex: 1;
			}
			>img{
				margin-top: ws(18);
			}
		}
		.item{
			height: ws(102/2);
			display: flex;
			align-items: center;
			font-size: ws(15);
			@include border-line(#e4e1e1, bottom);
			>input {
				font-size: ws(15);
				flex: 1;
				border: unset;
				padding: 0;
				height: unset;
				margin: 0;
				border-radius: unset;
			}
			.car-input{
				width: ws(150);
				text-align: right;
				position: absolute;
				color: $main-color;
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto;
			}
			.mui-icon{
				display: inline-table;
				font-size: ws(20);
				color: $main-color;
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto;
			}
		}
		.icon{
			width: ws(15);
			height: ws(16);
			margin-right: ws(10);
		}
	}
	.details{
		display: flex;
		flex-direction: column;
		>  textarea {
            font-size: ws(15);
            border: unset;
            background-color: #f3f3f3;
			border-radius: ws(8/2);
            margin-bottom: unset;
        }
	}
	
	.Liability{
		margin-top: ws(80);
		margin-bottom: ws(5);
		font-size: ws(12);
		color: #929292;
		line-height: 2.1;
	}
	.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{
		font-size: ws(20);
	}
	.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{
		color: #338edd;
	}
	.Liability-span{
		text-decoration: underline;
		padding-left: ws(60);
	}
	.mui-checkbox.mui-left input[type=checkbox], .mui-radio.mui-left input[type=radio]{
		left: ws(21);
		top: ws(1);
		width: ws(50);
		height: ws(50);
		text-align: center;
	}
	
	.botton-wapper {
	    width: 80%;
		margin: auto;
		margin-top: ws(30); 
	    height: ws(40);
	    box-shadow: 0 ws(-1) 0 0 rgba(0, 0, 0, .1);
	    display: flex;
	    align-items: center;
		justify-content: center;
	    z-index: 10;
		color: #fff;
	    background-image: linear-gradient(-10deg, darken($main-color, 10%) 0%, lighten($main-color, 10%) 100%);
		border-radius: ws(40);
	}
	.botton-wapper1 {
		width: 80%;
		margin: auto;
		height: ws(40);
		box-shadow: 0 ws(-1) 0 0 rgba(0, 0, 0, .1);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
		color: #fff;
		background-image: linear-gradient(-10deg, darken($main-color, 10%) 0%, lighten($main-color, 10%) 100%);
		border-radius: ws(40);
	}
}
